[자바스크립트] Mac에서 command 키 입력시 이벤트 처리 방법

제목처럼 Mac 환경의 브라우저에서 Command키를 누를 경우 이벤트 처리를 정리한 내용입니다. 아래는 최대한 가볍게 읽기 쉽도록 적어보려고 합니다. :)

# Mac에 존재하는 Command키

윈도우 기반과 달리 Mac 환경에서는 Command 키가 존재합니다. 이 커맨드 키는 다양한 용도로 사용되는데 브라우저를 기반으로 생각해보면 대표적인 기능은 바로 복사하기 또는 붙여넣기일 것입니다.

브라우저에서도 복사하기나 붙여하기는 많이 쓰이죠... 예를들어 아이디나 쿠폰 등의 값을 붙여넣는 경우를 생각해보겠습니다. 즉 키 이벤트를 추가한 후 Command 키를 누르면 이벤트 객체를 통해 어떤 키가 입력되었는지 확인하고 구현하는 것이 가능하겠죠. 이때 자바스크립트에서 Command 키 입력은 어떻게 알 수 있을까요?

event.metaKey


Command 키 입력 후 event 객체의 프로퍼티 중 하나인 metaKey 값이 바로 커맨드 키의 입력을 확인 할  수 있는 방법입니다. 예를들어 ctrlKey는 Ctrl 키를 입력할 경우 true 값을 반환합니다. 이처럼 Command 키를 누르면 metaKey 값이 true로 반환되죠. 반대로 입력하지 않을 경우 false를 반환하게 됩니다.

! 커맨드키 이벤트 제어가 필요한 경우

아까 언급한 것 처럼 Mac 환경에서 복사하기 또는 붙여넣기 이벤트 처리시 특히 주의해야 합니다. 그 이유는 Windows와 달리 Mac에서는 복사하기나 붙여넣이에 Ctrl이 아닌 Command 키를 사용하기 때문이죠. 즉 이벤트 처리시 ctrlKey에 추가로 Mac에 대응하기 위한 metaKey 역시 대응이 필요합니다.

만약 웹브라우저에서 복사하기를 금지하기 위해서 Ctrl 키와 v를 입력할 경우 이벤트를 동작하지 않도록 하기 위해서 아래처럼 preventDefault()를 사용할 수 있습니다. 다만 이 경우 Mac 환경에서는 복사하기가 정상적으로 동작하게 되겠죠... 바로 Command 키를 제어하지 않았기 때문입니다. 그래서 아래처럼 코드를 작성할 필요가 있을 것입니다.

위 코드는 ctrl 키 뿐만 아니라 command 키 역시 이벤트 처리에 추가하여 둘 중 하나라도 입력될 경우 복사하기를 동작하지 않을 것입니다.